<template>
  <div class="role base-main">
    <div class="tip-view">
      <p>首页 / 权限管理 / 角色管理</p>
    </div>
    <!-- 搜索视图 -->
    <div ref="searchv" class="search-view">
      <el-input v-model="searchInfo.name" placeholder="请输入角色名" />
      <el-input v-model="searchInfo.code" placeholder="请输入code" />
      <el-input v-model="searchInfo.type" placeholder="请输入别名" />
      <el-button
        class="btnRed"
        type="danger"
        @click="searchAction"
      >查询</el-button>
      <el-button type="warning" @click="visible = true">新增角色+</el-button>
    </div>
    <!-- 角色列表 -->
    <div class="list">
      <simpleTable
        :fix-height="true"
        :table-h="tableH"
        header-bg-color="#f5f7fa"
        :is-show-operation="true"
        :table-data="peopleList"
        :props="props"
      >
        <template #type="{ data }">
          <el-tag type="warning">{{ data.type }}</el-tag>
        </template>
        <template #operation="{ data }">
          <a
            class="linkRed"
            href="javascript:;"
            @click="modifiyRole(data)"
          >修改</a>
          <span style="color: #f0f2f5"> | </span>
          <a href="javascript:;" @click="deleteRole(data)">删除</a>
        </template>
      </simpleTable>
    </div>
    <!-- 新增角色 -->
    <a-modal
      title="新增角色"
      :visible="visible"
      :confirm-loading="confirmLoading"
      ok-text="确定"
      cancel-text="取消"
      ok-type="danger"
      @ok="onSubmit"
      @cancel="visible = false"
    >
      <el-form :model="form">
        <el-form-item label="角色名" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            style="width: 280px"
            autocomplete="off"
            placeholder="请输入角色名"
          />
        </el-form-item>
        <el-form-item label="别名" :label-width="formLabelWidth">
          <el-input
            v-model="form.type"
            style="width: 280px"
            autocomplete="off"
            placeholder="英文或拼音"
          />
        </el-form-item>
        <el-form-item label="code" :label-width="formLabelWidth">
          <el-input
            v-model="form.code"
            style="width: 280px"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="选择权限" :label-width="formLabelWidth">
          <el-tree show-checkbox :data="data" :props="defaultProps" @check-change="handleCheckChange" @node-click="handleNodeClick" />
        </el-form-item>
      </el-form>
    </a-modal>
  </div>
</template>
<script>
import simpleTable from './../../components/simpleTable'
export default {
  name: 'Role',
  components: {
    simpleTable
  },
  data() {
    return {
      tableH: 0,
      visible: false,
      confirmLoading: false,
      searchInfo: {
        name: '',
        code: '',
        type: ''
      },
      props: [
        {
          prop: 'name',
          label: '角色名'
        },
        {
          prop: 'code',
          label: 'code'
        },
        {
          prop: 'type',
          label: '别名'
        }
      ],
      peopleList: [
        {
          name: '管理员',
          code: 200293,
          type: 'admin'
        },
        {
          name: '商务',
          code: 200294,
          type: 'business'
        },
        {
          name: '临时用户',
          code: 200295,
          type: 'temporary'
        }
      ],
      form: {
        name: '',
        code: '',
        type: ''
      },
      formLabelWidth: '120px',
      data: [{
        label: '首页'
      }, {
        label: '产品管理',
        children: [{
          label: '产品列表',
          children: [{
            label: '增加产品'
          }, {
            label: '修改'
          }, {
            label: '删除'
          }]
        }]
      }, {
        label: '权限管理',
        children: [{
          label: '用户管理'
        }, {
          label: '角色管理'
        }, {
          label: '菜单管理'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {},
  watch: {
    '$store.state.setting.refresh': {
      handler: function(newVal, oldVal) {
        if (newVal) {
          alert('刷新角色管理页')
        }
      }
    }
  },
  created() {},
  mounted() {
    this.caculateHeight()
  },
  methods: {
    caculateHeight() {
      this.$nextTick(() => {
        const windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight
        const topHeight =
          64 + 54 + 20 + 56 + 40 + this.$refs.searchv.clientHeight
        const tableH = windowHeight - topHeight - 20
        this.tableH = tableH
        console.log(
          '打印搜索模块高度----',
          windowHeight,
          this.$refs.searchv.clientHeight,
          tableH
        )
      })
    },
    searchAction() {
      console.log('打印查询参数---', this.searchInfo)
    },
    onSubmit() {
      this.confirmLoading = true
      setTimeout(() => {
        this.confirmLoading = false
        this.visible = false
      }, 500)
      console.log('打印添加确定按钮数据----', this.form)
    },
    deleteRole(row) {
      console.log('删除角色---', row)
    },
    modifiyRole(row) {
      console.log('修改角色---', row)
    },
    handleNodeClick(data) {
      console.log(data)
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    }
  }
}
</script>
<style lang="scss" scoped>
.role {
  .iconImg {
    width: 20px;
    height: 20px;
  }
}
</style>
